/*
    增删改查  -  crud 增加（Create）、读取（Read）、更新（Update）和删除（Delete）
    1 查询
        1 定义一个函数
        2 发送请求 获取数据 渲染页面

    2 增加
        1 弹出和关闭 模态框（两种方式）
            1 通过给标签设置属性即可
                1 显示 data-bs-toggle=“modal” data-bs-target=“#addModal” 和 真实的模态框div的id 联系
                2 隐藏 data-bs-dismiss=“modal”
            2 通过 调用js代码来实现
                1 $("模态框的选择器").modal("show")
                2 ${"模态框的选择器"}.modal("hide")
*/

// 获取dom元素
const tbody = document.querySelector("tbody");
const province = document.querySelector('select[name="province"');
const city = document.querySelector('select[name="city"');
const county = document.querySelector('select[name="county"');
const form = document.querySelector(".add-form");
const addBtn = document.querySelector(".add-btn");
// let id;
// document.querySelector('#add').click = () => {
//   $("#addModal").modal("show");
// }
// 查询数据
let getData = async function () {
    const result = await axios({
        url: "/student/list",
    })
    const html = result.data.data.reduce((before, item) => {
        const { id, name, age, sex, group, phone, salary, truesalary, province, city, county } = item;

        return (
            before + `
            <tr>
              <th scope="row">${id}</th>
              <td>${name}</td>
              <td>${age}</td>
              <td>${sex}</td>
              <td>${group}</td>
              <td>${phone}</td>
              <td>${salary}</td>
              <td>${truesalary}</td>
              <td>${province + city + county}</td>
              <td>
                <button type="button" class="btn btn-primary btn-sm update-btn" data-id="${id}">修改</button>
                <button type="button" class="btn btn-danger btn-sm delete-btn" data-id="${id}">删除</button>
              </td>
            </tr>
            `
        )
    }, '');
    tbody.innerHTML = html;
}
getData();


/// 初始化 省市区组件的函数
async function initSelect() {
    // // 操作 省
    // const result = await axios({
    //     url: '/geo/province',
    // });
    // let html = result.data.reduce((before, item) => {
    //     return before + `
    //     <option value="${item}">${item}</option>
    //     `;
    // }, '<option value="">--省--</option>');
    // province.innerHTML = html;

    // 优化代码
    getSelectDAta("/geo/province", {}, "--省--", province);
}

// 绑定 province change事件
province.addEventListener("change", async function () {
    // // 操作 市
    // const result = await axios({
    //     url: "/geo/city",
    //     params: { pname: province.value },
    // });
    // let html = result.data.reduce((before, item) => {
    //     return before + `
    //     <option value="${item}">${item}</option> 
    //     `;
    // }, "<option>--市--</option>");
    // city.innerHTML = html;

    // 优化代码
    getSelectDAta("/geo/city", { pname: province.value }, "--市--", city);
    // 重置区标签
    county.innerHTML = county.firstChild.outerHTML;  // firstChid 获取 couty第一个孩子option， outerHTML 获取dom对应html模样
})

// 绑定 city change事件
city.addEventListener("change", async function () {
    // // 操作 市
    // const result = await axios({
    //     url: "/geo/county",
    //     params: { pname: province.value, cname: city.value },
    // });
    // let html = result.data.reduce((before, item) => {
    //     return before + `
    //     <option value="${item}">${item}</option> 
    //     `;
    // }, "<option>--市--</option>");
    // county.innerHTML = html;

    // 优化代码
    getSelectDAta("/geo/county", { pname: province.value, cname: city.value }, "--县--", county);
})

// 优化代码
async function getSelectDAta(url, params, text, target) {
    // 操作 
    const result = await axios({
        url,
        params,
    });
    let html = result.data.reduce((before, item) => {
        return before + `
            <option value="${item}">${item}</option>
            `;
    }, `<option value="">${text}</option>`);
    target.innerHTML = html;
}

initSelect();


// 给表单绑定提交事件
form.addEventListener("submit", async function (ev) {
    ev.preventDefault();
    // 快速获取表单的数据
    // 1 jquery 返回数据 字符串 a=1&b=&c=3
    // 2 form-serialize a=1&b=2&c=3   ===   {a:1, b=', c:3}
    // 3 formdata 需要自己去处理
    // 表单的验证 非空
    const data = serialize(form, { hash: true, empty: true });


    // 对对象做遍历，判断里面的值， 如果有发现一个 为空， 就不再往下执行了， 弹出提示框给用户
    // let isOK = ture; // 默认字段全部都合法
    for (const key in data) {
        if (!data[key]) {
            // 不合法
            // isOK = false
            toastr.error("请检查你的字段", "提示");
            // 终止 整改 提交事件的执行
            return;
            // break; // 只会终止 for循环， 但是 for下面的代码还会执行   
        }
    }
    // 判断一下， 还需不需要往下执行
    // if (!isOK) {
    //     return;
    // }
    // console.log(1234);

    // const result = await axios({
    //     url: "/student/add",
    //     method: "post",
    //     data: data,
    // })
    const formTitle = document.querySelector("#addModalLabel").innerText;
    let result;
    if (formTitle === "添加新学员") {
        delete data.id;
        // 调用接口， 完成新增
        result = await axios({
            url: "/student/add",
            method: "post",
            data: data,
        })
    } else if (formTitle === "修改学员") {
        // 修改要多一个id属性
        // data.id = id;
        result = await axios({
            url: "student/update",
            method: "put",
            data: data,
        })
    }
    if (result.data.code === 0) {
        toastr.success(result.data.message, "恭喜"),
            getData();
        // 下拉列表需要手动重置
        city.innerHTML = city.firstChild.outerHTML;
        county.innerHTML = county.firstChild.outerHTML;

        form.reset(); // 重置表单 清空表单 dom.value = '';
        $('#addModal').modal('hide');
    }
});

// 给编辑按钮绑定事件 事件委托
tbody.addEventListener('click', async function (ev) {
    // 获取被点击的真正的元素
    const target = ev.target;
    // 判断点击的是不是编辑按钮
    if (target.classList.contains('update-btn')) {
        $('#addModal').modal('show');
        document.querySelector("#addModalLabel").innerText = "修改学员";
        // 获取身上id属性
        let id = target.dataset.id;
        // 获取id对应的学员数据
        const result = await axios({
            url: '/student/one',
            params: {
                id: id,
            }
        })
        // 获取数据
        const obj = result.data.data;

        // 提前给 city 和 county初始化
        await getSelectDAta("/geo/city", { pname: obj.province }, "--市--", city);
        await getSelectDAta("/geo/county", { pname: obj.province, cname: obj.city }, "--县--", county);


        // 遍历， 挨个给表单赋值
        for (const key in obj) {
            const formEle = document.querySelector(`[name=${key}]`);
            // formEle 不一定存在， 所以需要先判断存在， 然后再去使用
            // 单选框， 应该是设置 checked属性， 而不是 value属性
            if (formEle && key !== "sex") {
                formEle.value = obj[key];
            }
            // 单独去设置 性别的选中
            // 找到性别单选框 同时 value 和 obj.sex相同
        }
        document.querySelector(`[name=sex][value=${obj.sex}]`).checked = true;
    } else if (target.classList.contains("delete-btn")) {
        if (confirn("您确定删除吗")) {
            const id = target.dataset.id;
            const result = await axios({
                url: "/student/delete",
                method: "dalete",
                params: { id },
            });
            if (result.data.code === 0) {
                toastr.success("删除成功", "提示");
                getData();
            }
        }
    }


})

// 添加按钮点击
addBtn.addEventListener('click', function (ev) {
    $('#addModal').modal('show');
    document.querySelector('#addModalLabel').innerText = "添加新学员";
})